// 入口函数
$(document).ready(function () {
 // 1.1 获取裁剪区域的 DOM 元素
 var $image = $('#image')
 // 1.2 配置选项
 const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview',
  viewMode: 2
 }

 // 1.3 创建裁剪区域
 $image.cropper(options)


 // 需求2: 选择图片
 $('#changeImageBtn').on('click', function () {
  $('#changeImageInp').click()
 })

 // 需求3: 渲染预览区域
 let layer = layui.layer
 $('#changeImageInp').on('change', function (e) {
  // console.log(this.value);
  // 拿到用户选择的文件
  let file = e.target.files[0]
  // 非空校验
  if (file === undefined) {
   return layer.msg('请选择上传头像图片')
  }
  // 根据选择的文件,创建一个对应的 URL 地址
  var newImgURL = URL.createObjectURL(file)
  // console.log(newImgURL);
  // 先销毁旧的裁剪区域,在重新设置图片路径,之后在创建新的裁剪区域
  $image
   .cropper('destroy') // 销毁旧的裁剪区域
   .attr('src', newImgURL) // 重新设置图片路径
   .cropper(options) // 重新初始化裁剪区域
 })

 // 需求4 : 上传头像
 $('#uploadAvatar').on('click', function () {
  // base64 格式的字符串
  var dataURL = $image
   .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
   })
   .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
  // axios 传递参数 , 底层默认没有帮助编码,要手动编码
  // encodeURLComponent:  会把特殊符号一起编译
  // alert(dataURL)
  axios({
   method: 'POST',
   url: '/my/update/avatar',
   data: 'avatar=' + encodeURIComponent(dataURL)
  }).then(res => {
   // console.log(res);
   // 判断
   if (res.data.status !== 0) {
    return layer.msg(res.data.message)
   }
   // 成功给提示,刷新index.html里面的头像
   layer.msg('恭喜您,更新头像成功!')
   window.parent.getUserInfo()
  })

  // 注意: jQuery中的ajax是不需要编码的,底层帮助我们编码了!
 })
})